<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" >
  <link rel="dns-prefetch" href="http://yoursite.com">
  <title>blog with sandsyu</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="blog with sandsyu">
<meta property="og:url" content="http://yoursite.com/index.html">
<meta property="og:site_name" content="blog with sandsyu">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="blog with sandsyu">
  
    <link rel="alternative" href="/atom.xml" title="blog with sandsyu" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  <link rel="stylesheet" href="/main.css?v=4.0.0.css">
  

  

</head>

<body>
  <div id="container" q-class="show:isCtnShow">
    <canvas id="anm-canvas" class="anm-canvas"></canvas>
    <div class="left-col" q-class="show:isShow">
      <div class="overlay"></div>
<div class="intrude-less">
	<header id="header" class="inner">
		<a href="/" class="profilepic">
			<img src="http://oif61bzoy.bkt.clouddn.com/header.png" class="js-avatar">
		</a>

		<hgroup>
		  <h1 class="header-author"><a href="/">Sandsyu</a></h1>
		</hgroup>

		
		<p class="header-subtitle">隐约雷鸣 阴霾天空 但盼风雨来 能留你在此.</p>
		

		<nav class="header-menu">
			<ul>
			
				<li><a href="/">主页</a></li>
	        
				<li><a href="/tags/测试/">测试开发</a></li>
	        
				<li><a href="/tags/APP/">移动开发</a></li>
	        
			</ul>
		</nav>
		<nav class="header-smart-menu">
	        
    		
    			
    			<a data-idx="0" q-on="click: openSlider(e, 'innerArchive')" href="javascript:void(0)">所有文章</a>
    			
    			
            
    			
    			<a data-idx="1" q-on="click: openSlider(e, 'friends')" href="javascript:void(0)">友链</a>
    			
    			
            
    			
    			<a data-idx="2" q-on="click: openSlider(e, 'aboutme')" href="javascript:void(0)">关于我</a>
    			
    			
            
		</nav>
		<nav class="header-nav">
			<div class="social">
				
					<a class="github" target="_blank" href="https://github.com/yushengchu" title="github"><i class="icon-github"></i></a>
		        
					<a class="zhihu" target="_blank" href="#" title="zhihu"><i class="icon-zhihu"></i></a>
		        
					<a class="qq" target="_blank" href="#" title="qq"><i class="icon-qq"></i></a>
		        
					<a class="mail" target="_blank" href="mailto:yushengchu@aliyun.com" title="mail"><i class="icon-mail"></i></a>
		        
			</div>
		</nav>
	</header>		
</div>

    </div>
    <div class="mid-col" q-class="show:isShow,hide:isShow|isFalse">
      <nav id="mobile-nav">
  	<div class="overlay">
  		<div class="slider-trigger"><i class="icon-sort"></i></div>
  		<h1 class="header-author js-mobile-header hide">Sandsyu</h1>
  	</div>
	<div class="intrude-less">
		<header id="header" class="inner">
			<div class="profilepic">
				<img src="http://oif61bzoy.bkt.clouddn.com/header.png" class="js-avatar">
			</div>
			<hgroup>
			  <h1 class="header-author">Sandsyu</h1>
			</hgroup>
			
			<p class="header-subtitle">隐约雷鸣 阴霾天空 但盼风雨来 能留你在此.</p>
			
			<nav class="header-menu">
				<ul>
				
					<li><a href="/">主页</a></li>
		        
					<li><a href="/tags/测试/">测试开发</a></li>
		        
					<li><a href="/tags/APP/">移动开发</a></li>
		        
		        
		        	<li><a href="/archives/">所有文章</a></li>
		        
				</ul>
			</nav>
			<nav class="header-nav">
				<div class="social">
					
						<a class="github" target="_blank" href="https://github.com/yushengchu" title="github"><i class="icon-github"></i></a>
			        
						<a class="zhihu" target="_blank" href="#" title="zhihu"><i class="icon-zhihu"></i></a>
			        
						<a class="qq" target="_blank" href="#" title="qq"><i class="icon-qq"></i></a>
			        
						<a class="mail" target="_blank" href="mailto:yushengchu@aliyun.com" title="mail"><i class="icon-mail"></i></a>
			        
				</div>
			</nav>
		</header>				
	</div>
</nav>

      <div id="wrapper" class="body-wrap">
        <div class="menu-l">
          <div class="canvas-wrap">
            <canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1" class="anm-canvas"></canvas>
          </div>
          <div id="js-content" class="content-ll">
            
  
    <article id="post-代码优化-更精简的tableView,抽离tableView DataSource Delegate" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/12/22/代码优化-更精简的tableView,抽离tableView DataSource Delegate/">代码优化-更精简的tableView,抽离tableView DataSource Delegate</a>
    </h1>
  

        <a href="/2016/12/22/代码优化-更精简的tableView,抽离tableView DataSource Delegate/" class="archive-article-date">
  	<time datetime="2016-12-22T06:39:42.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2016-12-22</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <blockquote>
<p>前言</p>
</blockquote>
<p>　　UITableView无疑是我们在开发iOS应用中使用频率非常高的一个控件,使用方法无外乎创建对象,关联delegate,datasource,实现对应方法.</p>
<p>　　几乎是在每一次使用UITableView的时候,都会去调用几个固定的方法,例如</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line"><span class="comment">//返回数量</span></div><div class="line"><span class="selector-tag">-</span> (NSInteger)<span class="selector-tag">tableView</span><span class="selector-pseudo">:(UITableView</span> *)<span class="selector-tag">tableView</span> <span class="selector-tag">numberOfRowsInSection</span><span class="selector-pseudo">:(NSInteger)section</span>;</div><div class="line"><span class="comment">//返回高度</span></div><div class="line"><span class="selector-tag">-</span> (CGFloat)<span class="selector-tag">tableView</span><span class="selector-pseudo">:(UITableView</span> *)<span class="selector-tag">tableView</span> <span class="selector-tag">heightForRowAtIndexPath</span><span class="selector-pseudo">:(NSIndexPath</span> *)<span class="selector-tag">indexPath</span>;</div><div class="line"><span class="comment">//返回cell实例对象</span></div><div class="line"><span class="selector-tag">-</span> (UITableViewCell *)<span class="selector-tag">tableView</span><span class="selector-pseudo">:(UITableView</span> *)<span class="selector-tag">tableView</span> <span class="selector-tag">cellForRowAtIndexPath</span><span class="selector-pseudo">:(NSIndexPath</span> *)<span class="selector-tag">indexPath</span></div><div class="line"><span class="comment">//cell点击事件</span></div><div class="line"><span class="selector-tag">-</span> (void) <span class="selector-tag">tableView</span><span class="selector-pseudo">:(UITableView</span> *)<span class="selector-tag">tableView</span> <span class="selector-tag">didSelectRowAtIndexPath</span><span class="selector-pseudo">:(NSIndexPath</span> *)<span class="selector-tag">indexPath</span></div></pre></td></tr></table></figure>
<p>　　这无疑是多了很多重复性质的代码,是否有办法可以简化UITableView的使用,避免这些重复性质的代码,同时能兼容大部分情况UITableView的使用呢?</p>
<p>　　将UITableView的Deleaget,DataSource抽离出来无疑是一个比较好的办法,实现一个通用的负责代理方法实现的类,通过block来回调,减少VC代码量.<br>
        
          <a class="article-more-a" href="/2016/12/22/代码优化-更精简的tableView,抽离tableView DataSource Delegate/#more">more >></a>
        
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/APP/">APP</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/iOS/">iOS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/开发/">开发</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2016/12/22/代码优化-更精简的tableView,抽离tableView DataSource Delegate/">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-iOS实现一个类似readme.io的动效登录界面" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/12/22/iOS实现一个类似readme.io的动效登录界面/">iOS实现一个类似readme.io的动效登录界面</a>
    </h1>
  

        <a href="/2016/12/22/iOS实现一个类似readme.io的动效登录界面/" class="archive-article-date">
  	<time datetime="2016-12-22T06:20:14.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2016-12-22</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>　　首先引入一个问题—-<strong>我们为什么需要动效设计?</strong></p>
<p>　　我觉得cocoachina的一篇文章很好的阐述了这个问题的答案，包括加强体验舒适度，减弱不可避免的不适感等等！附链接:<a href="http://blog.jobbole.com/89556/">我们为什么需要动效设计</a></p>
<p>　　本文所展示的动效登录界面就是参照文章中列出的<a href="https://dash.readme.io/login">readme</a>网站的登录界面所编写的~</p>
<p>　　本文效果Demo已经上传到github，<a href="https://github.com/yushengchu/readmeLoginView">点击去下载</a>。</p>
<p>　　最终效果展示：<br>　　<img src="http://upload-images.jianshu.io/upload_images/688404-c7dc919d467f0f2c.gif?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240/q/100" alt=""><br>
        
          <a class="article-more-a" href="/2016/12/22/iOS实现一个类似readme.io的动效登录界面/#more">more >></a>
        
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/APP/">APP</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/iOS/">iOS</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2016/12/22/iOS实现一个类似readme.io的动效登录界面/">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-iOS开发-图形验证码绘图实例" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/12/22/iOS开发-图形验证码绘图实例/">iOS开发-图形验证码绘图实例</a>
    </h1>
  

        <a href="/2016/12/22/iOS开发-图形验证码绘图实例/" class="archive-article-date">
  	<time datetime="2016-12-22T02:19:44.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2016-12-22</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <blockquote>
<p>前言:</p>
</blockquote>
<p>公司项目需求获取短信验证码前需要输入图形验证码防止羊毛客使用脚本批量注册平台账号<br>想了想还是自己重新实现了一下.</p>
<blockquote>
<p>思路</p>
</blockquote>
<pre><code>1.容器创建
    1.1 代码创建
    1.2 nib文件使用 
2.创建验证码字符串 
2.绘图
    2.1 绘字
    2.2 绘干扰线 
4.点击刷新机制
</code></pre>
        
          <a class="article-more-a" href="/2016/12/22/iOS开发-图形验证码绘图实例/#more">more >></a>
        
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/APP/">APP</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/iOS/">iOS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/开发/">开发</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2016/12/22/iOS开发-图形验证码绘图实例/">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-Appium+Python测试-输出测试报告" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/12/20/Appium+Python测试-输出测试报告/">Appium+Python测试-输出测试报告</a>
    </h1>
  

        <a href="/2016/12/20/Appium+Python测试-输出测试报告/" class="archive-article-date">
  	<time datetime="2016-12-20T09:11:04.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2016-12-20</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>1.导入HTMLTestRunner<br>　　　　在终端依次使用Python——import sys——print sys.path命令获取site-packages文件夹目录.<br><img src="http://oif61bzoy.bkt.clouddn.com/HTMLTestRunnerDraggedImage.png" alt=""><br>　　　　将下载的HTMLTestRunner.py文件放入site-packages,在脚本文件中引用,不出错即可.</p>
        
          <a class="article-more-a" href="/2016/12/20/Appium+Python测试-输出测试报告/#more">more >></a>
        
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Appium/">Appium</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/iOS/">iOS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/unittest/">unittest</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/测试/">测试</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2016/12/20/Appium+Python测试-输出测试报告/">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-Appium+Python iOS自动化测试从0-1" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/12/20/Appium+Python iOS自动化测试从0-1/">Appium+Python iOS自动化测试从0-1</a>
    </h1>
  

        <a href="/2016/12/20/Appium+Python iOS自动化测试从0-1/" class="archive-article-date">
  	<time datetime="2016-12-20T02:39:00.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2016-12-20</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p><strong>1.Appium环境搭建</strong><br>参考官网appium.io给出的终端命令进行安装.</p>
<pre><code>&gt; brew install node      //安装node
&gt; npm install -g appium  //安装 appium
&gt; npm install wd         //安装 appium client
&gt; appium &amp;               // 启动 appium
&gt; node your-appium-test.js //执行脚本
</code></pre><p>以上安装的是终端版的appium,再安装一个图形界面的appium方便查看界面元素.<br>
        
          <a class="article-more-a" href="/2016/12/20/Appium+Python iOS自动化测试从0-1/#more">more >></a>
        
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/Appium/">Appium</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/iOS/">iOS</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/unittest/">unittest</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/测试/">测试</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2016/12/20/Appium+Python iOS自动化测试从0-1/">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
    <article id="post-unittest测试案例编写思路" class="article article-type-post  article-index" itemscope itemprop="blogPost">
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2016/12/20/unittest测试案例编写思路/">unittest单元测试案例编写思路</a>
    </h1>
  

        <a href="/2016/12/20/unittest测试案例编写思路/" class="archive-article-date">
  	<time datetime="2016-12-20T02:21:54.000Z" itemprop="datePublished"><i class="icon-calendar icon"></i>2016-12-20</time>
</a>
      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>编写测试框架的基本思路:</p>
        
          <a class="article-more-a" href="/2016/12/20/unittest测试案例编写思路/#more">more >></a>
        
      

      
    </div>
    <div class="article-info article-info-index">
      
      
	<div class="article-tag tagcloud">
		<i class="icon-price-tags"></i>
		<ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/unittest/">unittest</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/测试/">测试</a></li></ul>
	</div>

      

      
        <p class="article-more-link">
          <a class="article-more-a" href="/2016/12/20/unittest测试案例编写思路/">展开全文 >></a>
        </p>
      

      
      <div class="clearfix"></div>
    </div>
  </div>
</article>








  
  


          </div>
        </div>
      </div>
      <footer id="footer">
  <div class="outer">
    <div id="footer-info">
    	<div class="footer-left">
    		&copy; 2016 Sandsyu
    	</div>
      	<div class="footer-right">
      		<a href="http://hexo.io/" target="_blank">Hexo</a>  Theme <a href="https://github.com/litten/hexo-theme-yilia" target="_blank">Yilia</a> by Litten
      	</div>
    </div>
    <p class="copyright">本站总访问量 <span id="busuanzi_value_site_pv"></span> 次, 访客数 <span id="busuanzi_value_site_uv"></span> 人次, 本文总阅读量 <span id="busuanzi_value_page_pv"></span> 次</p>
  </div>
  <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
</footer>
    </div>
    <script>
	var yiliaConfig = {
		mathjax: false,
		isHome: true,
		isPost: false,
		isArchive: false,
		isTag: false,
		isCategory: false,
		open_in_new: false,
		root: "/",
		innerArchive: true
	}
</script>

<script src="/./main.js?v=4.0.0.js"></script>


    
<div class="tools-col" q-class="show:isShow,hide:isShow|isFalse" q-on="click:stop(e)">
  <div class="tools-wrap">
    
    	<section class="tools-section tools-section-all" q-show="innerArchive">
        <div class="search-wrap">
          <input class="search-ipt" q-model="search" type="text" placeholder="find something…">
          <i class="icon-search icon" q-show="search|isEmptyStr"></i>
          <i class="icon-close icon" q-show="search|isNotEmptyStr" q-on="click:clearChose(e)"></i>
        </div>
        <div class="widget tagcloud search-tag">
          <p class="search-tag-wording">tag:</p>
          <label class="search-switch">
            <input type="checkbox" q-on="click:toggleTag(e)" q-attr="checked:showTags">
          </label>
          <ul class="article-tag-list" q-show="showTags">
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">Appium</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">unittest</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">iOS</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">测试</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">APP</a>
              </li>
             
              <li class="article-tag-list-item">
                <a href="javascript:void(0)">开发</a>
              </li>
            
            <div class="clearfix"></div>
          </ul>
        </div>
        <ul class="search-ul">
          <p q-show="jsonFail" style="padding: 20px; font-size: 12px;">
            缺失模块。<br/>1、在博客根目录（注意不是yilia根目录）执行以下命令：<br/> npm i hexo-generator-json-content --save<br/><br/>
            2、在根目录_config.yml里添加配置：
<pre style="font-size: 12px;" q-show="jsonFail">
  jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true
</pre>
          </p>
          <li class="search-li" q-repeat="items" q-show="isShow">
            <a q-attr="href:path|urlformat" class="search-title"><i class="icon-quo-left icon"></i><span q-text="title"></span></a>
            <p class="search-time">
              <i class="icon-calendar icon"></i>
              <span q-text="date|dateformat"></span>
            </p>
            <p class="search-tag">
              <i class="icon-price-tags icon"></i>
              <span q-repeat="tags" q-on="click:choseTag(e, name)" q-text="name|tagformat"></span>
            </p>
          </li>
        </ul>
    	</section>
    

    
    	<section class="tools-section tools-section-friends" q-show="friends">
  		
        <ul class="search-ul">
          
            <li class="search-li">
              <a href="http://github.com/" target="_blank" class="search-title"><i class="icon-quo-left icon"></i>github</a>
            </li>
          
            <li class="search-li">
              <a href="http://jianshu.com/" target="_blank" class="search-title"><i class="icon-quo-left icon"></i>简书</a>
            </li>
          
            <li class="search-li">
              <a href="http://stackoverflow.com/" target="_blank" class="search-title"><i class="icon-quo-left icon"></i>stackoverflow</a>
            </li>
          
            <li class="search-li">
              <a href="https://segmentfault.com/" target="_blank" class="search-title"><i class="icon-quo-left icon"></i>segmentfault</a>
            </li>
          
        </ul>
  		
    	</section>
    

    
    	<section class="tools-section tools-section-me" q-show="aboutme">
  	  	
  	  		<div class="aboutme-wrap" id="js-aboutme">&lt;span style = &quot;color:rgba(254, 65, 65, 0);&quot;&gt; 隐约雷鸣 阴霾天空&lt;br/&gt;但盼风雨来 能留你在此.&lt;/span&gt;</div>
  	  	
    	</section>
    
  </div>
  
</div>
    <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>
  </div>
</body>
</html>